<script lang="ts" name="aqi">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import { deviceCount, detectionLog, deviceLog } from "@/api/server_repair";
import * as echarts from 'echarts';
import type { TabsPaneContext } from 'element-plus';

export default {
  setup() {

    const router = useRouter()

    onMounted(() => {


      // 图表
      type EChartsOption = echarts.EChartsOption;

      var chartDom = document.getElementById('aqi')!;
      var myChart = echarts.init(chartDom);
      window.onresize = function () {
        myChart.resize();
      };
      var option: EChartsOption;

      option = {
        series: [
          {
            min: 0,
            max: 500,
            splitNumber: 5,
            type: 'gauge',
            radius:'100%',
            axisLine: {
              lineStyle: {
                width: 8,
                color: [
                  [0.2, '#99e1e5'],
                  [0.4, '#10ddc2'],
                  [0.6, '#ffd460'],
                  [0.8, '#f07b3f'],
                  [1, '#d72323']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -8,
              length: 5,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            splitLine: {
              distance: -8,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              color: 'auto',
              distance: 10,
              fontSize: 10
            },
            detail: {
              valueAnimation: true,
              fontSize: 12,
              formatter: '{value} AQI',
              color: 'auto'
            },
            data: [
              {
                value: 98
              }
            ]
          }
        ]
      };

      option && myChart.setOption(option);

    })

    return {
      // router
    }
  },
}

</script>

<template>
  <div id="aqi" style="height: 100%;"></div>
</template>

<style scoped lang="scss">
</style>
